<template>
	<view style="height: 100%; overflow-y: scroll;">
		<view class="shop-layout" v-if="null != orderDetail">
			<view v-for="(goods, i) in orderDetail.goodsDetailList">
				<view class="card">
					<image class="card-pic" :src="goods.picUrl"></image>
					<view class="card-content">
						<view class="card-content-title">{{goods.name}}</view>
						<view class="card-content-count">x {{goods.count}}</view>
					</view>
					<view class="card-content-price">¥ {{numFilter(goods.price)}}</view>
				</view>
				<view class="gray-line"></view>
			</view>
			<view class="desc-layout">
				<view class="desc-layout-txt">共计{{count}}件商品, 合计: ¥{{numFilter(orderDetail.money)}}</view>
				<view v-if="null != orderDetail.couponId" class="desc-layout-txt" style="color: red;">{{orderDetail.couponName}} -¥{{numFilter(orderDetail.deductMoney)}}</view>
				<view class="desc-layout-txt">实付: ¥{{numFilter(orderDetail.actualMoney)}}</view>
			</view>
		</view>
		
		<view class="shop-layout" v-if="null != orderDetail">
			<view class="card">
				<view class="card-content-left">订单号</view>
				<view class="card-content-right">{{orderDetail.id}}</view>
			</view>
			<view class="card">
				<view class="card-content-left">配送地址</view>
				<view class="card-content-right">{{orderDetail.address}}</view>
			</view>
			<view class="card">
				<view class="card-content-left">收货人</view>
				<view class="card-content-right">{{orderDetail.name}} {{orderDetail.phone}}</view>
			</view>
			<view class="card">
				<view class="card-content-left">支付时间</view>
				<view class="card-content-right">{{orderDetail.payTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	
	export default {
		data() {
			return {
				orderDetail: null,
				count: 0
			}
		},
		methods: {
			
			async getOrderDetail(id) {
				var res = await new Promise((resolve, reject) => {
					http.get('/order/get?id=' + id).then(res => {
						resolve(res.data);
					})
				});
				if (res.code == 200) {
					this.orderDetail = res.data;
					this.count = 0;
					for (var j in this.orderDetail.goodsDetailList) {
						var goods = this.orderDetail.goodsDetailList[j];
						this.count += goods.count;
					}
				}
			},
			
			numFilter(value) {
			    let realVal = parseFloat(value).toFixed(2)
			    return realVal
			},
		},
		onLoad(options) {
			if (null != options.id) {
				this.getOrderDetail(options.id);
			}
		}
	}
</script>

<style>
	.shop-layout {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.card {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 10px 10px;
	}
	.card-pic {
		display: flex;
		width: 100px;
		height: 100px;
		margin: 10px 10px;
	}
	.card-content {
		display: flex;
		flex-direction: column;
		height: 100px;
		margin: 10px 10px;
		width: 45%;
	}
	.card-content-title {
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}
	.card-content-count {
		font-size: 14px;
		text-align: left;
		margin-top: auto;
		margin-bottom: 0;
	}
	.card-content-price {
		display: flex;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		margin-top: auto;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.desc-layout {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.desc-layout-txt {
		display: flex;
		margin-left: auto;
		margin-bottom: 5px;
		margin-right: 10px;
		font-size: 14px;
	}
	.gray-line {
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
		height: 1px;
		background-color: gainsboro;
	}
	.card-content-left {
		display: flex;
		text-align: center;
		font-size: 16px;
		color: rgb(111, 111, 111);
		width: 20%;
	}
	.card-content-right {
		display: flex;
		text-align: center;
		font-size: 16px;
	}
</style>